import React, { useState } from 'react';

const Layout = props => {
    const [current, setCurrent] = useState('/');
    return (
        <div>
            <div id="svgOutput">
                <svg width="200px" height="200px" viewBox="0 0 200 200">
                    <defs>
                        {/* let arrowMarker = defs.append('marker')
                    .attr('id', 'arrow')
                    .attr('markerUnits', 'strokeWidth')
                    .attr('markerWidth', '18')
                    .attr('markerHeight', '30')
                    .attr('viewBox', '0 0 12 12')
                    .attr('refX', '8')
                    .attr('refY', '6')
                    .attr('orient', 'auto');

                let arrowPath = 'M2,2 L10,6 L2,10 L6,6 L2,2';

                arrowMarker.append('path')
                    .attr('d', arrowPath)
                    .attr('fill', '#3176D2'); */}
                        <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="3" refY="8" orient="auto">
                            <path d="M2,2 L2,13 L8,7 L2,2" style={{ fill: '#000000' }} ></path>
                        </marker>
                    </defs>
                    <path d="M100,10 L150,10 L150,60" style={{
                        stroke: '#6666ff', strokeWidth: '1px', fill: 'none',
                        markerEnd: 'url(#markerArrow)'
                    }}></path>
                    <path d="M2,2 L2,11 L10,6 L2,2" style={{ fill: '#000000' }}></path>
                </svg>
            </div>
        </div>
    );
};
export default Layout;